<template>
	<view>
		<view class="good-detail-back" @tap="$back">
			<van-icon name="arrow-left" color="#ffffff" size="36rpx" />
		</view>
		<van-image @click="showImage" lazy-load width="100%" height="600rpx" :src="base_url + goodsDetail.image" />
		<!-- scroll-view -->
		<scroll-view scroll-y :style="{height: height, backgroundColor: '#f8f8f8'}">
			<view style="height: 16rpx;" />
			<view class="order-goods-detail-box">
				<view class="order-goods-detail-title van-ellipsis">
					<text>{{goodsDetail.goodsName}}</text>
				</view>
				<view class="order-goods-detail-num">
					<text>售出: {{goodsDetail.sales}}</text>
				</view>
				<view class="order-food-item-m">
					<view class="order-vip">
						<view class="order-vip-text">Vip</view>
						<view class="order-vip-price">&yen; {{goodsDetail.discountPrice}}</view>
					</view>
					<view class="order-stepper">
						<text style="font-weight: bold;font-size: 36rpx;">&yen; {{goodsDetail.price}}</text>
						<van-stepper button-size="22px" input-class="order-input-class" @change="orderChange(goodsDetail, $event)"
							:input-width="goodsDetail.count == 0 ? 0 : '24px'" :show-minus="goodsDetail.count!==0" disable-input
							min="0" theme="round" :value="goodsDetail.count" />
					</view>
				</view>
			</view>
			<view style="height: 16rpx;" />
			<view class="order-goods-detail-sub-title-box">
				<view class="order-goods-detail-sub-title">
					<text>商品详情</text>
				</view>
				<view class="order-goods-detail-sub-content">
					<text>{{goodsDetail.detail || '暂无详情'}}</text>
				</view>
			</view>
			<view style="height: 16rpx;" />
		</scroll-view>

		<!-- 购物袋 -->
		<van-submit-bar custom-class="custom-class-submit-bar" :price="totalPrice*100" button-text="去结账" @submit="onSubmit">
			<view class="bag-box">
				<van-icon name="shopping-cart" color="#000000" size="56rpx" @click="showCart = true" />
				<view class="bag-box-num" v-if="totalCount > 0">{{totalCount}}</view>
			</view>
		</van-submit-bar>
		<!-- 购物车 -->
		<van-popup @close="showCart = false" :show="showCart" position="bottom" custom-style="height: 60%;">
			<view class="cart-popup-title">
				<text class="cart-popup-title-l">已选商品</text>
				<view class="cart-popup-title-r" @tap="clearCart">
					<van-icon name="delete-o" />
					<text style="padding-left: 8rpx;">清空购物车</text>
				</view>
			</view>
			<scroll-view scroll-y style="height: 80%;">
				<van-empty description="购物车是空的~" v-if="totalCount === 0" />
				<view class="order-food-item" v-for="item in checkedGoodsList" :key="item.id">
					<van-image lazy-load radius="8rpx" width="160rpx" height="160rpx" :src="base_url + item.image" />
					<view class="order-food-item-m">
						<text>{{item.title}}</text>
						<view class="order-vip">
							<view class="order-vip-text">Vip</view>
							<view class="order-vip-price">&yen; {{item.discountPrice}}</view>
						</view>
						<view class="order-stepper">
							<text style="font-weight: bold;font-size: 36rpx;">&yen; {{item.price}}</text>
							<van-stepper button-size="22px" input-class="order-input-class" @change="orderChange(item, $event)"
								:input-width="item.count == 0 ? 0 : '32px'" :show-minus="item.count!==0" disable-input
								min="0" theme="round" :value="item.count" />
						</view>
					</view>
				</view>
				<view style="height: 32rpx;" />
			</scroll-view>
		</van-popup>
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	import {
		base_url
	} from '../../utils/request.js'
	import Dialog from '@/wxcomponents/vant/dist/dialog/dialog.js';
	export default {
		data() {
			return {
				num: 0,
				showCart: false,
				base_url
			}
		},
		computed: {
			...mapState(['goodsDetail', 'checkedGoodsList']),
			...mapGetters(['totalCount', 'totalPrice']),
			height() {
				return this.scrollviewHeilght - 332 + 'px'
			}
		},
		methods: {
			...mapActions(['setGoodsByItem', 'clearCarts']),
			// 清空购物车
			clearCart() {
				Dialog.confirm({
					context: this,
					title: '提示',
					message: '确认清空购物车吗?',
				}).then(() => {
					this.clearCarts();
				}).catch(() => {
					
				})
			},
			orderChange(item, {
				detail
			}) {
				item.count = detail;
				this.setGoodsByItem({
					item
				})
			},
			// 查看大图
			showImage() {
				uni.previewImage({
					indicator: 'none',
					current: 0,
					urls: [this.base_url + this.goodsDetail.image]
				})
			}
		}
	}
</script>

<style lang="scss">
	.van-submit-bar {
		z-index: 201 !important;
	}

	.bag-box {
		position: relative;

		.bag-box-num {
			text-align: center;
			position: absolute;
			background-color: #ee0a24;
			line-height: 36rpx;
			font-size: 24rpx;
			height: 36rpx;
			border-radius: 18rpx;
			color: #FFFFFF;
			min-width: 36rpx;
			right: -20rpx;
			top: -20rpx;
		}
	}

	.cart-popup-title {
		padding: 0 32rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.cart-popup-title-r {
			color: #999999;
		}
	}
</style>

<style lang="scss" scoped>
	.good-detail-back {
		width: 64rpx;
		height: 64rpx;
		position: fixed;
		z-index: 202;
		top: 102rpx;
		left: 32rpx;
		border-radius: 32rpx;
		background-color: rgba(0, 0, 0, .3);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.order-goods-detail-box {
		background-color: #fff;
		// margin: 16rpx 0;
		padding: 0 32rpx;

		.order-goods-detail-title {
			height: 72rpx;
			line-height: 72rpx;
			font-size: 36rpx;
			color: #000000;
		}

		.order-goods-detail-num {
			color: #999999;
			font-size: 24rpx;
		}

		.order-food-item-m {
			flex: 1;
			padding: 16rpx 0;

			.order-vip {
				display: flex;
				border-radius: 8rpx;
				overflow: hidden;
				text-align: center;
				height: 32rpx;
				line-height: 32rpx;
				font-size: 24rpx;
				margin: 16rpx 0;

				.order-vip-text {
					background-color: #000;
					color: #eecfa0;
					padding: 0 8rpx;
					font-size: 20rpx;
				}

				.order-vip-price {
					background-color: #eecfa0;
					color: #000;
					padding: 0 8rpx;
				}
			}

			.order-stepper {
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	.order-goods-detail-sub-title-box {
		background-color: #fff;
		padding: 0 32rpx;

		.order-goods-detail-sub-title {
			height: 72rpx;
			line-height: 72rpx;
			font-size: 36rpx;
			color: #000000;
		}

		.order-goods-detail-sub-content {
			color: #999999;
			padding-bottom: 32rpx;
		}
	}

	.order-food-item {
		display: flex;
		height: 160rpx;
		padding: 32rpx;

		.order-food-item-m {
			flex: 1;
			height: 160rpx;
			padding: 16rpx 0 16rpx 32rpx;

			.order-vip {
				display: flex;
				border-radius: 8rpx;
				overflow: hidden;
				text-align: center;
				height: 32rpx;
				line-height: 32rpx;
				font-size: 24rpx;
				margin: 16rpx 0;

				.order-vip-text {
					background-color: #000;
					color: #eecfa0;
					padding: 0 8rpx;
				}

				.order-vip-price {
					background-color: #eecfa0;
					color: #000;
					padding: 0 8rpx;
				}
			}

			.order-stepper {
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
